import React, { Component } from 'react';
import $ from 'jquery';
import Banner from '@/components/MusicHall/songList/Banner'
import '@/components/MusicHall/songList/SonglistNav.scss'


class SonglistNav extends Component {
    constructor(props) {
        super(props)
        this.state = {
            languages:['国语','英语','韩语','粤语','日语'],
            genre:['流行','轻音乐','摇滚','民谣','R&B','嘻哈','电子','古典','爵士'],
            theme:['ACG','经典','网络歌曲','影视','KTV热歌','儿歌','中国风','古风','情歌'],
            mood:['伤感','安静','快乐','治愈','励志','甜蜜','寂寞','宣泄','思念'],
            scene:['睡前','夜店','学习','运动','开车','约会','工作','旅游','婚礼'],
            Type:''
        }
    }
    
    componentDidMount () {
        $('#root').click(function(){
          $('.album_list').hide();
        })
        //点击时背景改变
        $('.songlistNav-span').click(function(){
            $('.songlistNav-span').removeClass('active')
            $(this).addClass('active')
        })
      }

//显示---类别
    albumType (e) {
        // console.log(e);
        this.setState({
            Type: e
        })
        $('.part_songlist__type').show()
        $('.part_songlist_h2').hide()
    }
    
    //删除
    albumRemove () {
        $('.part_songlist__type').hide()
        $('.part_songlist_h2').show()
        this.setState({
            Type: '全部'
        })
        $('.songlistNav-span').removeClass('active')
    }  
    
    render () {
        return (
            <div className='songlistNav-box'>
                <div className='songlistNav-nav'>
                    {/* 语种 */}
                    <ul>
                        <h2>语种</h2>
                        {
                            this.state.languages.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <span className='songlistNav-span' onClick={this.albumType.bind(this, item)}>{item}</span>
                                    </li>
                                )
                            })
                        }
                        <li>
                            <span className='songlist-more'>
                                更多
                                <i className='iconfont icon-unfold'></i>
                            </span>                        
                        </li>  
                    </ul>
                    {/* 流派 */}
                    <ul>
                        <h2>流派</h2>
                        {
                            this.state.genre.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <span className='songlistNav-span' onClick={this.albumType.bind(this, item)}>{item}</span>
                                    </li>
                                )
                            })
                        }
                    </ul>
                    {/* 主题 */}
                    <ul>
                        <h2>主题</h2>
                        {
                            this.state.theme.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <span className='songlistNav-span' onClick={this.albumType.bind(this, item)}>{item}</span>
                                    </li>
                                )
                            })
                        }
                    </ul>

                    {/* 心情 */}
                    <ul>
                        <h2>心情</h2>
                        {
                            this.state.mood.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <span className='songlistNav-span' onClick={this.albumType.bind(this, item)}>{item}</span>
                                    </li>
                                )
                            })
                        }
                    </ul>
                    {/* 场景 */}
                    <ul>
                        <h2>场景</h2>
                        {
                            this.state.scene.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <span className='songlistNav-span' onClick={this.albumType.bind(this, item)}>{item}</span>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
                
                {/* 歌曲分类的框框 */}
                <div className='part_songlist_hd'>
                    <h2 className='part_songlist_h2'>全部歌曲</h2>
                    <div className='part_songlist__type'>
                        {this.state.Type}
                        <i className='iconfont icon-close_light' onClick={this.albumRemove.bind(this)}></i>
                    </div>
                </div>
                <Banner Type={this.state.Type}/>
            </div>
        )
    }
}

export default SonglistNav;